<template>
    <div class="homePage">
       <div class="top">
            <div class="block block1">
                <el-date-picker v-model="value1" format="yyyy" @change="years" align="right" type="year" placeholder="选择年"></el-date-picker>
                <el-date-picker v-model="value2" format="MM" @change="months" align="right" type="month" placeholder="选择月"></el-date-picker>
                <el-button type="primary" @click="chaxun">查 询</el-button>
            </div>
            <div class="contList">
                <dl v-for="(val, index) in listData" :key="index">
                    <dt>
                        <p><img :src="val.src"></p>
                    <p><strong>{{val.title}}</strong></p>
                    </dt>
                    <dd>{{val.num}}</dd>
                </dl>
            </div>
       </div>
       <div class="top">
            <div class="block block1">
                <el-date-picker v-model="value3" align="right" type="date" placeholder="选择日期"></el-date-picker>
                <el-button type="primary" class="btn2" @click="chaxun2">查 询</el-button>
            </div>
            <div class="contList">
                <dl v-for="(val, index) in listData2" :key="index">
                    <dt>
                        <p><img :src="val.src"></p>
                    <p><strong>{{val.title}}</strong></p>
                    </dt>
                    <dd>{{val.num}}</dd>
                </dl>
            </div>
       </div>
    </div>
</template>
<script>
    export default {
        name:"homePage",
        data() {
            return {
                value1: '',
                value2: '',
                value3: '',
                listData:[
                    {
                        "src":"../static/images/k3.png",
                        "title":"本月新增用户数",
                        "num":1280
                    },
                     {
                        "src":"../static/images/k4.png",
                        "title":"环比增长",
                        "num":"80%"
                    },
                     {
                        "src":"../static/images/k3.png",
                        "title":"本月新增建议",
                        "num":50
                    },
                     {
                        "src":"../static/images/k4.png",
                        "title":"环比增长",
                        "num":"30%"
                    }
                ],
                listData2:[
                    {
                        "src":"../static/images/k4.png",
                        "title":"本月新增用户数",
                        "num":680
                    },
                     {
                        "src":"../static/images/k5.png",
                        "title":"环比增长",
                        "num":"80%"
                    },
                     {
                        "src":"../static/images/k6.png",
                        "title":"本月新增建议",
                        "num":20
                    },
                     {
                        "src":"../static/images/k7.png",
                        "title":"环比增长",
                        "num":"10%"
                    }
                ]
            };
        },
        methods:{ 
            years(val){
                this.value1 = val;
            },
            months(val){
                this.value2 = val;
            },
            chaxun(){
                this.$http.get("../../../static/json/homepage.json",{
                    year:this.value1,
                    month:this.value2
                }).then(function(msg){
                    if(msg.status == 200){
                         this.$message('数据请求成功啦！');
                         this.listData = msg.data;
                    }
                }.bind(this));
            },
            chaxun2(){
                this.$http.get('../../../static/json/homepage2.json',{
                    dete:this.value3
                }).then(function(msg){
                    this.listData2 = msg.data;
                }.bind(this));
            }
        }
    };
</script>
<style>
.block1{
    display: block;
    height: 150px;
    position: relative
}
.block1 button{
    position: absolute;
    left: 812px;
    top: 50px;
}
button.btn2{
    position: absolute;
    left: 410px;
    top: 50px;
}
.block .el-date-editor{
    float: left;
    margin:50px 100px;
}
img{
    display: inline-block;
    width:65px;
    height: 65px;
}
.contList{
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    padding: 35px 0;
    border: 1px solid #bae7f7;
}
.contList dl{
    width: 25%;
    float: left;
    text-align: center;
}
.contList dt{
    font-size: 18px;
}
.contList dt p{
    margin:10px auto;
}
.contList dd{
    color: #ff8080;
    font-size: 36px
}
</style>
